<template>
  <div style="width: 350x; text-align: center">
    <van-tabs
      v-model:active="active"
      swipeable
      animated
      type="card"
      @click-tab="onClickTab"
    >
      <van-tab title="收藏">
        <list1></list1>
      </van-tab>
      <van-tab title="订单">
        <list2></list2>
      </van-tab>
      <van-tab title="支付">
        <list3></list3>
      </van-tab>
      <van-tab title="不让看">
        <list3></list3>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import list1 from "./listdata/list1.vue";
import list2 from "./listdata/list2.vue";
import list3 from "./listdata/list3.vue";
import { showToast } from "vant";

let active = ref(true);

const onClickTab = ({ title }) => showToast(title);
</script>

<style>
</style>